<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="main"></div>
    <script src="./lib/echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {
                data: ['Forest', 'Steppe', 'Desert', 'Wetland']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true }
                }
            },
            xAxis: [
                { 
                axisLine:{
                    lineStyle:{
                    type:'dashed',
                    }
                },
                axisLabel:{
                    color:"red"
                },
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            color:[
                {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                    offset: 0, color: '#ffffff' // 0% 处的颜色
                }, {
                    offset: 1, color: 'red' // 100% 处的颜色
                }],
                global: false // 缺省为 false
                }
            ],
            series: [
                {
                showBackground: true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#88cdea' },
                    { offset: 1, color: '#fdc0cb' }
                    ])
                },
                name: 'Desert',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 200, 150]
                },
                {
                showBackground: true,
                name: 'Wetland',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: [150, 77, 101, 99, 40, 90, 98]
                },
            ]
            
        };
        myChart.setOption(option);
    </script>
</body>
</html>